/* General Styles for Responsiveness */
body {
  margin: 0;
  padding: 0;
  /* font-family: 'Roboto', Arial, sans-serif; */
  font-family: -apple-system, BlinkMacSystesmFont, "Segoe UI", Roboto, Arial, sans-serif;

  font-size: 15px;
  line-height: 1.6;
  color: #333;
  background-color: #f4f7fc;
}

/* Wrapper for Centering the Page */
.page-wrapper {
  display: flex;
  flex-direction: row; /* Force side-by-side layout */
  justify-content: center;
  align-items: flex-start;
  min-height: 100vh;
  background-color: #f4f7fc;
  padding: 5px;
  box-sizing: border-box;
  flex-wrap: nowrap; /* Prevent wrap on large screens */
}

/* Main Container */
.main-container {
  flex: 1;
  max-width: 900px;
  background-color: white;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  padding: 20px;
  overflow: hidden;
  min-width: 0;
}

/* Header */
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  background-color: #036;
  color: white;
  font-size: 20px;
  font-weight: bold;
  position: relative;
  border-radius: 5px;
}

.title {
  font-size: 20px;
  color: white;
}

#contact-us-field {
  position: absolute;
  top: 10px;
  right: 20px;
  background-color: #036;
  padding: 5px 10px;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

#contact-us-field a {
  color: white;
  text-decoration: none;
  font-size: 14px;
  font-weight: bold;
}

#contact-us-field a:hover {
  text-decoration: underline;
}

/* Footer */
footer {
  padding: 20px;
  background-color: #2c3e50;
  color: #ffffff;
  text-align: center;
  font-size: 14px;
  border-top: 2px solid #34495e;
  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
}

footer p {
  margin: 10px 0; /* Add spacing between paragraphs */
  color: #ffffff; /* Ensure text is visible */
  text-align: center; /* Center-align the text */
}

footer a {
  color: #1abc9c; /* Use a contrasting color for links */
  text-decoration: none; /* Remove underline */
  margin: 0 8px; /* Add spacing between links */
  font-weight: bold; /* Make links stand out */
  display: inline-block; /* Ensure links are inline and spaced properly */
}

footer a:hover {
  text-decoration: underline; /* Add underline on hover */
  color: #ffffff; /* Change color on hover */
}

/* Editors Section */
.editor-container {
  margin: 1px 0; /* Reduce margin */
}

.editor {
  height: 220px;
  width: 100%;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin-bottom: 15px; /* Reduce margin */
}

/* Buttons */
.button-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 5px;
}

.button_vv {
  padding: 8px 15px; /* Match padding with copy and clear buttons */
  font-size: 12px; /* Match font size */
  cursor: pointer;
  background-color: #036; /* Keep the dark blue background */
  color: white; /* White text for contrast */
  border: none;
  border-radius: 5px; /* Keep rounded corners */
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.button_vv:hover {
  background-color: #024; /* Darker hover color */
  transform: translateY(-1px); /* Subtle lift effect */
}

.copy-button-container {
  display: flex; /* Use flexbox for alignment */
  justify-content: flex-end; /* Align buttons to the right */
  gap: 8px; /* Add spacing between buttons */
  margin-top: 10px; /* Reduce margin */
}

.copy-button {
  padding: 8px 15px; /* Reduce padding */
  font-size: 14px; /* Reduce font size */
  cursor: pointer;
  background-color: #036;
  color: white;
  border: none;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

.copy-button:hover {
  background-color: #024;
  transform: translateY(-2px);
}

.encoding-select {
  padding: 4px 8px;
  font-size: 12px;
  border-radius: 4px;
  border: 1px solid #ccc;
}

/* SEO Content Sections */
section {
  margin: 20px 0; /* Increase margin for better separation */
  padding: 0 20px; /* Add padding for better alignment */
}

h2 {
  font-size: 20px; /* Increase heading size for better hierarchy */
  color: #2c3e50; /* Use a darker color for headings */
  margin-bottom: 8px; /* Reduce margin */
}

p, li {
  font-size: 15px;
  line-height: 1.6;
  color: #555;
  text-indent: 15px;
  text-align: justify;
}

ul, ol {
  margin-left: 15px;
}

/* Contact Us Section */
#contact {
  margin: 20px 0;
  padding: 20px;
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 5px;
}

#contact h3 {
  font-size: 20px;
  color: #333;
  margin-bottom: 10px;
}

#contact h4 {
  font-size: 16px;
  color: #555;
  margin-top: 15px;
}

#contact p {
  font-size: 14px;
  line-height: 1.6;
  color: #555;
}

#contact ul.points {
  margin: 10px 0;
  padding-left: 20px;
}

#contact ul.points li {
  font-size: 14px;
  line-height: 1.6;
  color: #555;
}

/* Side Navigation */
.side-nav {
  width: 220px;
  background-color: #05203a;
  padding: 20px 0;
  border-radius: 12px;
  margin-right: 20px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}

/* Navigation Header */
.side-nav-header {
  text-align: center;
  padding: 20px 10px;
  border-bottom: 1px solid #1a2a3a; /* Deeper separator for a cleaner cut */
}

.side-nav-header img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 50%;
  margin-bottom: 10px;
  border: 2px solid #ffffff; /* Add white ring around image */
}

.side-nav-header h1 {
  font-size: 16px;
  color: #ffffff;
  margin: 0;
  font-weight: 600; /* Slightly bolder */
}

/* Navigation Links */
.side-nav ul {
  list-style: none;
  padding: 0;
  margin: 20px 0 0 0;
  width: 100%; /* Take full width */
}

.side-nav ul li {
  margin: 5px 0;
}

.side-nav ul li a {
  color: #ecf0f1;
  text-decoration: none;
  font-size: 14px;
  padding: 12px 20px;
  display: block;
  width: 100%;
  text-align: left;
  border-radius: 6px; /* Slightly more rounding */
  transition: all 0.3s ease;
}

.side-nav ul li a:hover {
  background-color: #0c3a5f;
  color: #ffffff;
  transform: translateX(4px);
}

/* Output Heading */
#outputHeading {
  margin-top: 5px; /* Reduce the gap above the output heading */
  font-size: 16px; /* Ensure the heading remains readable */
  color: #2c3e50; /* Keep the heading color consistent */
}

/* Responsive Styles */
@media (max-width: 1024px) {
  .page-wrapper {
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
  }

  .side-nav {
    width: 100%; /* Full width for smaller screens */
    margin-right: 0; /* Remove spacing between navigation and main container */
    margin-bottom: 20px; /* Add spacing below the navigation */
  }

  .main-container {
    width: 100%;
    padding: 10px;
  }

  footer {
    font-size: 13px;
  }
}

@media (max-width: 768px) {
  header {
    font-size: 16px; /* Further reduce header font size */
    padding: 10px;
  }

  .editor {
    height: 150px; /* Further reduce editor height */
  }

  .button_vv {
    font-size: 12px; /* Further reduce button font size */
    padding: 6px 10px; /* Further adjust button padding */
  }

  h2 {
    font-size: 14px; /* Further reduce heading font size */
  }

  p, li {
    font-size: 12px; /* Further reduce paragraph and list font size */
  }

  footer {
    font-size: 12px; /* Smaller font for small screens */
    padding: 15px;
  }

  .side-nav {
    padding: 10px 0; /* Reduce padding for smaller screens */
  }

  .main-container {
    padding: 15px; /* Reduce padding for smaller screens */
  }
}

@media (max-width: 480px) {
  footer {
    font-size: 11px; /* Further reduce font size for very small screens */
    padding: 10px;
  }

  footer a {
    margin: 0 5px; /* Reduce spacing between links */
  }

  .side-nav {
    font-size: 12px; /* Reduce font size for very small screens */
  }

  .main-container {
    padding: 10px; /* Further reduce padding for very small screens */
  }
}